let token = localStorage.getItem('token')
let q = {
  tagname: '',
  page: 1,
  limit: 10,
}
// 获取列表
function getContent() {
  axios({
    method: '',
    url: 'http://124.223.14.236:8060/admin/ydd_tag/list',
    params: q,
    headers:{
      "x-token":token
    },
  })
  .then(res =>{
    console.log(res);
    console.log(res);
    let arr = res.data.data.data.map(function(item,value){
      return `
      <tr>
      <td>${value + 1}</td>
      <td>${item.id}</td>
      <td id="tagname">${item.tagname}</td>
      <td style="text-align: center;">
      <form class="layui-form" action="" id="operate">
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo " id="edit" data-id=${item.id}><i class="iconfont icon-bianji" ></i> </button>
    <button type="reset" class="layui-btn layui-btn-primary " id="del" data-id=${item.id}><i class="iconfont icon-shanchu"></i></button>
  </div>
</div>
</form>
    </td>
    </tr>`
    })
    $('tbody').html(arr.join(''))
   
    // 获取分页
 // 分页
 layui.use('laypage', function () {
  var laypage = layui.laypage
  //执行一个laypage实例
  laypage.render({
    elem: 'pages', //注意，这里的 pages 是 ID，不用加 # 号
    count: res.data.data.count, //数据总数，从服务端得到
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
    curr: q.page, // 代表当前页码
    limit: q.limit, // 代表每页显示多少条数据
    limits: [1, 2, 3, 8],
    jump: function(obj, first){  // 当第一次执行渲染分页时 执行jump 
      //obj包含了当前分页的所有参数，比如：
      console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      console.log(obj.limit); //得到每页显示的条数
      // console.log(obj);
      //首次不执行
      if(first){  // 不设置first 就会死循环
        return
      }
      q.page = obj.curr
      q.limit = obj.limit
      getContent()
    }
  })
})
  })
  .catch(err =>{})


}
getContent()


// 添加标签
$('.add_btn').on('click',function(){
  layui.use('layer', function(){
    layer.open({
      title: '在线调试',
      btn: null,
      content: `
      <form class="layui-form" action="" id="submit">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-inline">
      <input type="text" name="title"   lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="input_add">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
      `,
      offset: '100px',
      area: ['700px', '250px'],
    });   
  });
})

// 添加标签
$('body').on('submit','#submit',function(e){
    e.preventDefault()
    axios({
    method: 'POST',
    url: 'http://124.223.14.236:8060/admin/ydd_tag/add',
    headers:{
      "x-token":token
    },
    data: {
      tagname: $('#input_add').val()
    }
  })
  .then(res =>{
    // console.log(res);
    layer.close(layer.index)
    layer.msg('添加成功')
    getContent()
  })
  .catch(err =>{})
})
  
// 删除
$('body').on('click','#del',function(e){
  let id = this.getAttribute('data-id')
  console.log(id);
  layer.open({
    offset: '100px',
    area: ['400px', '150px'],
    title: ''
    ,content: '确定删除吗,是否继续?',
    btn: ['确认', '取消'],
    yes: function(index, layero){
      //按钮【按钮一】的回调
      getDelete(id)
    }
    ,btn2: function(index, layero){
     layer.msg('取消删除')
    }
  });     
  
})

function getDelete(id) {
  axios({
    method: 'GET',
    url: 'http://124.223.14.236:8060/admin/ydd_tag/del',
    headers:{
      "x-token":token
    },
    params: {
      id: id
    }
  })
  .then(res =>{
    console.log(res.data);
    if(res.data.errno !== 1000 && res.data.errmsg !== '系统默认数据,不允许删除' ){
     console.log(res);
    layer.close(layer.index)
    layer.msg('删除成功')
    getContent()
    }else {
      layer.msg('删除失败')
    }
 
  })
  .catch(err =>{})
}

// 编辑
$('body').on('click','#edit',function(e){
  e.preventDefault()
  let id = this.getAttribute('data-id')
  console.log(id);
  layer.open({
    offset: '100px',
    area: ['700px', '250px'],
    title: ''
    ,content: `<form class="layui-form" action="" id="edit_form">
    <div class="layui-form-item">
      <label class="layui-form-label" id="edit_label">标签名称</label>
      <div class="layui-input-inline">
        <input type="text" name="title" required  lay-verify="required" id="input_edit" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    
  </form>`,
    btn: ['确认', '取消'],
    yes: function(index, layero){
      //按钮【按钮一】的回调
      let tagname = $('#input_edit').val()
      console.log(tagname);
      getEdit(id,tagname)

    }
    ,btn2: function(index, layero){
     layer.msg('取消编辑')
    }
  });     
  
})

function getEdit(id,tagname) {
  axios({
    method: 'POST',
    url: 'http://124.223.14.236:8060/admin/ydd_tag/update',
    headers:{
      "x-token":token
    },
    data: {
      id: id,
      tagname: tagname
    }
  })
  .then(res =>{
     console.log(res);
    layer.close(layer.index)
    layer.msg('编辑成功')
    getContent()
   
 
  })
  .catch(err =>{})
}

// 筛选
$('#search').on('click',function(){
  q.tagname = $('#filtrate_input').val()
  getContent()
})
// 刷新
$('#flush').on('click',function(){
  location.reload() 
})
// 重置
$('#reset').on('click',function(){
  $('#filtrate_input').val('')
  q.tagname = ''
  getContent()
})

// 鼠标悬停
document.querySelector('#flush').addEventListener('mouseover',function(){
  document.querySelector('.alert1').style.opacity = '1'
})
document.querySelector('#flush').addEventListener('mouseout',function(){
  document.querySelector('.alert1').style.opacity = '0'
})
// 鼠标悬停2
document.querySelector('#close').addEventListener('mouseover',function(){
  document.querySelector('.alert').style.opacity = '1'
})
document.querySelector('#close').addEventListener('mouseout',function(){
  document.querySelector('.alert').style.opacity = '0'
})
// 点击隐藏 显示
document.querySelector('#close').addEventListener('click',function(){
  
  if(document.querySelector('.top').style.display === 'none') {
    document.querySelector('.top').style.display = 'block'
  }else {
    document.querySelector('.top').style.display = 'none'
    document.querySelector('.alert').innerHTML = `打开搜索区
    <i class="layui-icon layui-icon-triangle-d"></i>`
    document.querySelector('.one_right_btn').innerHTML = `<i class="iconfont icon-xiangxia"></i>`
  

  }
})



layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/static/json/table/demo3.json'
    ,toolbar: true
    ,title: '用户数据表'
    ,totalRow: true
    ,cols: [[
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
      ,{field:'username', title:'用户名', width:120, edit: 'text'}
      ,{field:'email', title:'邮箱', width:150, edit: 'text'}
      ,{field:'experience', title:'积分', width:100, sort: true, totalRow: true}
      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
      ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
      ,{field:'sign', title:'签名'}
      ,{field:'city', title:'城市', width:100}
      ,{field:'ip', title:'IP', width:120}
      ,{field:'joinTime', title:'加入时间', width:120}
    ]]
    ,page: true
    ,response: {
      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
    }
    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
      return {
        "code": res.status, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.rows.item //解析数据列表
      };
    }
  });
});